<template>
    <view class="container">
		<view class="box">
        <!-- 标题 -->
        <view class="title">
            <text>开始学习~</text>
        </view>
		<view class="study-box">
	    <image src="/static/image/扁平头像-boy 01.png"></image>
		<!-- 倒计时时钟 -->
		<view v-if="isStudying" class="countdown-container">
		    <view class="countdown-circle">
		        <text class="countdown-text">{{ countdown }}</text>
		    </view>
		</view>
		</view>
        <!-- 功能按钮区域 -->
        <view class="button-container">
            <button class="start-button" @click="startStudy">{{ isStudying ? '暂停学习' : '开始学习' }}</button>
            <button class="rest-button" @click="takeRest">休息一下</button>
        </view>
        <!-- 学习统计区域 -->
        <view class="statistics">
            <text>今日学习时长: {{ studyTime }} 分钟</text>
			 <p style="margin-top: 15px;"><text>吭哧吭哧就是干~</text></p>
        </view>
    </view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            studyTime: 0,
            isStudying: false,
            countdown: '60:00',
            timer: null,
            fiveMinuteTimer: null
        };
    },
    methods: {
        startStudy() {
            if (this.isStudying) {
                // 暂停学习
                clearInterval(this.timer);
                clearTimeout(this.fiveMinuteTimer);
                this.isStudying = false;
            } else {
                // 开始学习
                this.isStudying = true;
                let totalSeconds = 60 * 60; // 60 分钟
                this.timer = setInterval(() => {
                    if (totalSeconds > 0) {
                        totalSeconds--;
                        const minutes = Math.floor(totalSeconds / 60);
                        const seconds = totalSeconds % 60;
                        this.countdown = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                        this.studyTime = 60 - minutes;
                    } else {
                        clearInterval(this.timer);
                        this.isStudying = false;
                    }
                }, 1000);

                // 设置五分钟后的定时器
                this.fiveMinuteTimer = setTimeout(() => {
                    console.log('五分钟时间到啦！');
                    // 这里可以添加你想要在五分钟后执行的具体操作
                }, 5 * 60 * 1000);
            }
        },
        takeRest() {
            // 这里可以添加休息的逻辑，例如暂停计时器
            if (this.isStudying) {
                clearInterval(this.timer);
                clearTimeout(this.fiveMinuteTimer);
                this.isStudying = false;
            }
            console.log('休息一下');
        }
    }
};
</script>

<style scoped>
.container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
}
	
.box{
	margin:40% 0px;
}
.title {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: orange;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
	
.study-box{
	background-color: ;
	display: flex;
	margin-top: 60px;
	width: 80%;
	margin-left: 10%;
/* 	background: linear-gradient(45deg, #ffffff 0%, #d9ff4f 99%, #f6f6f6 100%); */
	border: none;
}
.study-box image
{
	width: 150px;
	height: 150px;
}
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.start-button,
.rest-button {
    width: 150px;
    height: 40px;
    line-height: 40px;
    margin: 0 10px;
    background-color: #ffd700;
    color: #000000;
    font-size: 18px;
    border-radius: 20px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.statistics {
    margin-top: 30px;
    text-align: center;
    font-size: 18px;
    color: orange;
	font-weight: bolder;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.countdown-container {
/*    position: fixed; */
/*    bottom: 20px; */
    left: 70%;
    transform: translateX(35%);
}

.countdown-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.countdown-text {
    font-size: 24px;
    font-weight: bold;
    color: #63cc6a;
}
</style>